
<script>
	var length = localStorage.getItem("estudia_achievment_length");
	
	var lineseparator = "<div class=\"line_separator\"></div>";
	
	var index = 1;
	var badge_id;
	
	var flag_left 	= 1;
	var flag_right	= 1;
	
	for (var i = 1; i <= 11; i++) {
		if (i < 10) {
			badge_id = "b0" + i;
		} else {
			badge_id = "b" + i;
		}
		
		if (localStorage.getItem("estudia_achievment_" + badge_id) == 0) {
			if (flag_left%2 == 1) {
				$('#list_unachieved_left').append(addListUnachieved(badge_id, getBadge_name(badge_id), getBadge_detail(badge_id)));
			} else {
				$('#list_unachieved_right').append(addListUnachieved(badge_id, getBadge_name(badge_id), getBadge_detail(badge_id)));
				$('#list_unachieved_left').append(lineseparator);
				$('#list_unachieved_right').append(lineseparator);			
			}
			flag_left++;
		} else {
			if (flag_right%2 == 1) {
				$('#list_achieved_left').append(addListAchieved(badge_id, getBadge_name(badge_id), getBadge_detail(badge_id)));
			} else {
				$('#list_achieved_right').append(addListAchieved(badge_id, getBadge_name(badge_id), getBadge_detail(badge_id)));
				$('#list_achieved_left').append(lineseparator);
				$('#list_achieved_right').append(lineseparator);			
			}
			flag_right++;
		}
		
	}
	

function addListAchieved(badge_id, badge_name, badge_detail) {
	return 		"<div class=\"list_detail\" id=\"list_detail\"> " +
					"<div class=\"list_detail_image\">" +
						"<img src=\"../assets/images/badges/" + badge_id + ".png\"/>" +
					"</div>" +
					
					"<div class=\"list_detail_text\">" +
						"<div id=\"text_title_achieved\">" + badge_name + "</div>" +
						"<div id=\"text_detail_achieved\">" + badge_detail + "</div>" +
					"</div>"
				"</div>"; // */
};

function addListUnachieved(badge_id, badge_name, badge_detail) {
	return 		"<div class=\"list_detail\" id=\"list_detail\"> " +
					"<div class=\"list_detail_image\">" +
						"<img src=\"../assets/images/badges/gray_" + badge_id + ".png\"/>" +
					"</div>" +
					
					"<div class=\"list_detail_text\">" +
						"<div id=\"text_title_unachieved\">" + badge_name + "</div>" +
						"<div id=\"text_detail_unachieved\">" + badge_detail + "</div>" +
					"</div>"
				"</div>"; // */
};


function getBadge_name(badge_id) {
	
	switch(badge_id) {
		case "b01":
			return "Motivated";
			break;
		case "b02":
			return "Novice Learner";
			break;
		case "b03":
			return "Lucky Guess";
			break;
		case "b04":
			return "Genius";
			break;
		case "b05":
			return "Study Oriented";
			break;
		case "b06":
			return "Hard Worker";
			break;
		case "b07":
			return "Grown Up";
			break;
		case "b08":
			return "Thirst of Knowledge";
			break;
		case "b09":
			return "Graduated";
			break;
		case "b10":
			return "Cum Laude";
			break;
		case "b11":
			return "Education Savior";
			break;
		default:
			return "undefined";
			break;
	}
	//return "alalalal";
};

function getBadge_detail(badge_id) {
	
	switch(badge_id) {
		case "b01":
			return "First login";
			break;
		case "b02":
			return "Finish first lesson";
			break;
		case "b03":
			return "Finish first quiz";
			break;
		case "b04":
			return "Perfect score at a quiz";
			break;
		case "b05":
			return "Finish all lessons in a course";
			break;
		case "b06":
			return "Finish all quizes in a course";
			break;
		case "b07":
			return "First level-up";
			break;
		case "b08":
			return "Finish all lessons of all courses";
			break;
		case "b09":
			return "Finish all quizes of all courses";
			break;
		case "b10":
			return "Finish all quizes with average score of 8/10";
			break;
		case "b11":
			return "Achieve all achievements";
			break;
		default:
			return "undefined";
			break;
	} 
	//return "alalalal";
}; // */
</script>

<div id="title"><h1>Achievement</h1></div>
	<div id="list_achieved">
		<div class="list_title">Penghargaan kamu sejauh ini</div>
		<div class="list_left" id="list_achieved_left"></div>
		<div class="list_right" id="list_achieved_right"></div>
	</div>
	
	<div id="list_unachieved">
		<div class="list_title">Penghargaan yang bisa kamu raih</div>
		<div class="list_left" id="list_unachieved_left"></div>
		<div class="list_right" id="list_unachieved_right"></div>
	</div>
	
</div>
